<template>
  <div>
    <el-container>
      <!--  侧边栏  -->
      <el-aside :width="asideWidth">
        <!--  logo   -->
        <div class="logo">
          <img src="@/assets/logo2.png" class="img">
          <span class="logo-title" v-show="!isCollapse">Layout 2024</span>
        </div>

        <!--  菜单栏  -->
        <el-menu router default-active="$route.path"
                 background-color="#001529"
                 text-color="rgba(255,255,255,0.65)"
                 active-text-color="#fff"
                 style="border: none"
                 :collapse="isCollapse"
                 :collapse-transition="false">
          <!--  一级路由  -->
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span>系统首页</span>
          </el-menu-item>

          <!--  二级路由  -->
          <el-submenu index="/system">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统管理</span>
            </template>

            <el-menu-item index="/role">
              <template slot="title">
                <i class="el-icon-remove-outline"></i>
                <span>角色管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/menu">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>菜单管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/user">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <!--  二级路由  -->
          <el-submenu index="/business">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>业务管理</span>
            </template>

            <el-menu-item index="/department">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>部门管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/post">
              <template slot="title">
                <i class="el-icon-service"></i>
                <span>岗位管理</span>
              </template>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>


      <el-container>
        <el-header>
          <i :class="iconMenu" style="font-size: 26px;margin-right: 20px" @click="showMenu"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          </el-breadcrumb>

          <div class="dropdown">
            <el-dropdown :hide-on-click="false" @command="handleCommand">
              <img src="@/assets/logo2.png" class="img" style="margin-right: 5px">
              <span style="position: relative;bottom: 12px">超级管理员</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
                <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>


        <el-main>
          <div>
            早安骚年,祝你开心每一天！
          </div>
          <br/>
          <el-card class="box-card">
            <el-row>
              <el-button>默认按钮</el-button>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
            </el-row>
            <br/>
            <el-row>
              <el-button type="info">信息按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </el-row>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      isCollapse: false,
      asideWidth: "220px",
      iconMenu: "el-icon-d-arrow-left"
    }
  },
  methods: {
    showMenu() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse === true ? "64px" : "220px";
      this.iconMenu = this.isCollapse === true ? "el-icon-d-arrow-right" : "el-icon-d-arrow-left";
    },
    handleCommand(command) {
      alert(command)
    }
  }
}
</script>

<style scoped>
.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}

.img {
  width: 40px;
  height: 40px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.dropdown {
  flex: 1;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end !important
}

.el-aside {
  background-color: #001529;
  height: 100vh;
  /*展示效果*/
  transition: 0.3s;
  /*阴影*/
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.logo {
  height: 60px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
}

/*鼠标移入时
    .el-menu-item:hover ：一级菜单以及二级子菜单
    .el-submenu :hover: 二级菜单主菜单
    .el-menu-item:hover i ： 一级菜单以及二级子菜单图标
    .el-submenu__title:hover i ： 二级菜单主菜单
*/
.el-menu-item:hover, .el-submenu :hover, .el-menu-item:hover i, .el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #40a9ff !important;
  border-radius: 10px !important;
  height: 40px;
  line-height: 40px;
  width: calc(100% - 8px);
  margin: 4px;
}

.el-menu-item.is-active i {
  margin-left: -4px;
}
</style>